<template>
	<view class="register clearfix">
		<cu-custom :isBack="!readonly" bgColor="text-black"></cu-custom>
		<form class="block clearfix  padding padding-bottom-lg radius-sm overflow-hidden   py20">
			<view class="flex  flex-direction login-box ">
				<view class="discenter"><image src="/static/login/logo.png" class="login-logo" mode=""></image></view>
				<view class="mt10 discenter f16 fwb">邻里</view>
				<view class="text-xxl text-bold py20">{{ i18n.title }}</view>
				<evan-form hide-required-asterisk ref="form" :model="form">
					<evan-form-item prop="phone">
						<view class="cu-form-group h40 bb1 solid-bottom padding-lr-xs" slot="formItem">
							<input type="number" :maxlength="11" placeholder-class="text-info" :placeholder="i18n.phone[0] " name="tel" v-model.trim="form.tel" />
						</view>
					</evan-form-item>
					<evan-form-item prop="card">
						<view class="cu-form-group h40 bb1 solid-bottom padding-lr-xs" slot="formItem">
							<input :maxlength="6" placeholder-class="text-info" :placeholder="i18n.verifyCode[0]" name="card" v-model.trim="form.card" />
							<button class="cu-btn padding-lr-xs margin-left bg-transparent text-danger" :disabled="disabled" @click="getCode">{{ codeText }}</button>
						</view>
					</evan-form-item>
					<evan-form-item prop="pwd">
						<view class="cu-form-group h40 bb1 solid-bottom padding-lr-xs" slot="formItem">
							<input password :maxlength="16" placeholder-class="text-info" placeholder="设置登录密码" name="pwd" v-model.trim="form.pwd" />
						</view>
					</evan-form-item>
					<evan-form-item prop="payPwd">
						<view class="cu-form-group h40 bb1 solid-bottom padding-lr-xs" slot="formItem">
							<input password type="number" :maxlength="16" placeholder-class="text-info" placeholder="设置支付密码" name="payPwd" v-model.trim="form.payPwd" />
						</view>
					</evan-form-item>
					<evan-form-item prop="tuijianma">
						<view class="cu-form-group h40 bb1 solid-bottom padding-lr-xs" slot="formItem">
							<input :maxlength="16" :disabled="readonly" placeholder-class="text-info" placeholder="填写邀请码" name="tuijianma" v-model.trim="form.tuijianma" />
						</view>
					</evan-form-item>
				</evan-form>
				<button :disabled="isLoading" @click="formValidate" type class="mt20  button-red text-white">
					<text v-if="isLoading" class="cuIcon-loading2 cuIconfont-spin margin-right-sm"></text>
					{{ i18n.title }}
				</button>
				<view class="flex align-center justify-between mt10 f12" v-if="!readonly">
					<view class="flex align-center text-danger" @click="pushPage('/pages/login/resetPassword')">忘记密码?</view>
					<view class="forget padding-tb-xs text-danger" @click="pushPage('/pages/login/login')">
						<text class="text-info">已有账号？</text>去登录></view>
				</view>
				<view class="flex align-center justify-between mt10 f12" v-if="readonly">
					<view class="flex align-center text-danger" @click="locationURL">下载地址</view>
				</view>
			</view>
		</form>
		<view class="login-end discenter" @click="pushPage('/pages/login/xieyi')">
			<text>登录/注册即表示同意</text>
			<text class="text-red">《用户协议》</text>
		</view>
		<view @touchmove.stop.prevent class="cu-modal" :class="modalName == 'dialogModal' ? 'show' : ''">
			<view class="cu-dialog bg-white" @tap.stop>
				<view class="cu-bar justify-end">
					<view class="content">{{ i18n.download }}</view>
					<view class="action" @click="HideModal"><text class="cuIcon-close"></text></view>
				</view>
				<view class="padding-tb margin-bottom">{{ i18n.download }} App</view>
				<view class="cu-bar solid-top h50">
					<view class="action flex-sub" @click="download('Android')">Android</view>
					<view class="action flex-sub solid-left" @click="download('iOS')">iOS</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import verifyCode from '@/mixins/verifyCode'
export default {
	mixins: [verifyCode],
	data() {
		return {
			dropdown: false,
			active: 0,
			form: {
				tel: '',
				card: '',
				pwd: '',
				payPwd:'',
				tuijianma:''
			},
			weixinid:'',
			type:0,
			readonly: false,
		}
	},
	computed: {
		...mapState(['downloadURL']),
		
	},
	onLoad(e) {
		if(e.weixin){
			this.weixinid=e.weixin
			this.type=1
		}
		if (e.code) {
			this.readonly = true
			this.form.tuijianma = e.code
		}
		// #ifdef H5
		window.addEventListener('focusout', function() {
			setTimeout(function() {
				window.scrollTo(0, document.documentElement.scrollTop || document.body.scrollTop)
			})
		})
		// #endif
	},
	methods: {
		...mapActions(['setToken']),
		download(p) {
			location.href = this.downloadURL[p]
		},
		toggleDropdown() {
			this.dropdown = !this.dropdown
		},
		pushReset() {
			this.$Router.replace({ path: '/pages/login/resetPassword' })
		},
		locationURL(){
			location.href = this.downloadURL['Android']
		},
		async formSubmit(e) {
			if(this.form.tel==''){
				uni.showToast({
					title:'请输入手机号',
					icon:'none'
				})
				return false
			}
			if(this.form.card==''){
				uni.showToast({
					title:'请输入验证码',
					icon:'none'
				})
				return false
			}
			if(this.form.pwd==''){
				uni.showToast({
					title:'请设置登录密码',
					icon:'none'
				})
				return false
			}
			if(this.form.payPwd==''){
				uni.showToast({
					title:'请设置支付密码',
					icon:'none'
				})
				return false
			}
			if(this.form.tuijianma==''){
				uni.showToast({
					title:'请填写邀请码',
					icon:'none'
				})
				return false
			}
			if(this.type==1){
				let parmas={
					phoneNum:this.form.tel,
					card:this.form.card,
					password:this.form.pwd,
					payPassword:this.form.payPwd,
					yqCode:this.form.tuijianma,
					//openId:this.weixinid,
				}
				let { data } = await this.$http.post('login.register', parmas, { isAuth: false, tipConfig: { storeLoading: true, isSuccessTip: true } })
			}else{
				let parmas={
					phoneNum:this.form.tel,
					card:this.form.card,
					password:this.form.pwd,
					payPassword:this.form.payPwd,
					yqCode:this.form.tuijianma,
					//openId:this.weixinid,
				}
				let { data } = await this.$http.post('login.register', parmas, { isAuth: false, tipConfig: { storeLoading: true, isSuccessTip: true } })
			}
			
			// #ifdef H5
			this.ShowModal('dialogModal')
			// #endif
			// #ifndef H5
			setTimeout(() => {
				this.$Router.back()
			}, 800)
			// #endif
		}
	}
}
</script>

<style lang="less">
	.login-logo{
		width: 125rpx;
		height: 125rpx;
	}
	.login-box{
		width: 100%;
		margin: auto;
		
		position: relative;
		z-index: 1;
		padding: 40rpx 0rpx;
	}
	.login-line{
		width: 135rpx;
		height: 2rpx;
		background-color: #ECECEC;
	}
</style>
